<template>
	<view class="commercial-entity-card" @click="linkDetail(item.id)">
		<text class="commercial-entity-card-address">{{item.address}}</text>
		<image :src="item.img" mode="aspectFill" class="commercial-entity-card_img" />
		<view class="commercial-entity-card-other-info">
			<text class="commercial-entity-card-name">{{item.name}}</text>
			<view class="commercial-entity-card-stores">
				<text style="font-weight: 600;color: red;font-size: 28rpx;">{{item.stores}}</text>
				<text style="font-weight: 600;">家商户</text>
			</view>
			<text class="commercial-entity-card-area">{{item.area}}m²商业面积</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['item'],
		name:"CommercialEntityCard",
		data() {
			return {
				
			};
		},
		methods: {
			linkDetail(id) {
				uni.navigateTo({
					url: `/pages/commercialEntityDetail/commercialEntityDetail?id=${id}`,
					animationType: 'slide-in-right', // 指定动画类型
					animationDuration: 1000 // 动画时长
				})
			}
		}
	}
</script>

<style scoped>
	.commercial-entity-card {
		padding: 20rpx;
		background: #ffffff;
		display: flex;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		position: relative;
	}
	
	.commercial-entity-card-address {
		position: absolute;
		top: 0;
		right: 0;
		padding: 5rpx 10rpx;
		background: #f5f5f5;
		color: #666666;
	}
	
	.commercial-entity-card_img {
		width: 150rpx;
		height: 150rpx;
	}
	
	.commercial-entity-card-other-info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 20rpx;
	}
	
	.commercial-entity-card-name {
		font-size: 32rpx;
		font-weight: 600;
		letter-spacing: 2rpx;
	}
	
	.commercial-entity-card-stores {
		font-size: 24rpx;
		color: #999999;
	}
	
	.commercial-entity-card-area {
		font-size: 24rpx;
		color: #999999;
	}

</style>